Dynamic Chart
This section describes about its Overview, Component Reference, Component Configuration and Configuration.
Overview
Dynamic Chart feature helps quickly and effectively visualize like-type data spread across multiple records. Depending on the configuration, data can be grouped, combined, filtered and represented with different chart types: Donut, Pie, Horizontal Bar, or Vertical Bar. Each Chart may have available its own Title, Subtitle, Legend, and Pop up table. For Chart representation, the Chart.js library is used. The administrator may modify existing charts, configure new ones, and place them on different pages.
Component Reference
| Component/Module Name | Context/Module API Name | Type | Details | ||
|---|---|---|---|---|---|
| Context Type Detail | ContextTypeDetail__mdt | Custom Metadata | Custom Metadata Type Context Type Detail with the value Chart in the field Type. | ||
| Dynamic Chart Container | dynamicChartContainer | LWC component |
The component that renders charts according to the passed configuration.
|
Component Configuration
Dynamic Chart Container
Dynamic Chart Component is an exposed component that can be dropped on the Record Page and on Home Page.
Design Attributes:
| Attribute | Details | ||
|---|---|---|---|
| Charts Configuration Name |
The value for this attribute is a list of developer names of Context Type Detail records splitted by a comma. Example: Chart_Attendees_by_Attendance_Status, Chart_Attendees_by_Invitation_Status.
|
Context Type Detail Dynamic Chart Configuration
Configuration in custom metadata is represented by records of Context Type Detail(ContextTypeDetail__mdt) custom metadata type which has "Chart" value in "Type__c" field.
Such custom metadata records contain configuration attributes in JSON format in Value field. Here is the list of JSON attributes that can be used:
| Parameters | Required | Explanation | ||
|---|---|---|---|---|
| title | TextS or name of the custom label which can be displayed as a title. | |||
| subtitle | Text or name of the custom label which can be shown in subtitled; {0} can be always replaced by Total value. | |||
| chartType |
|
Type of the chart; available values: pie, barStacked, doughnut. | ||
| sObjectName |
|
API name of the sObject that can be used to build chart dataset. | ||
| relationFieldName | API name of the field related to the current context record with records with selected sObject type. | |||
| fieldSet | Set of the columns that can be displayed on the popup table. | |||
| fieldList | Columns that can be shown in the table on the popup. | |||
| groupingField |
|
API name of the field that can be used for dividing dataset into different groups. | ||
| uiFilterField | API name of the field that can be shown on UI and can allow user to filter data by picklist options. | |||
| fieldToAggregate |
API name of the field to aggregate in case user needs to show SUM or Average value of some field instead of a count of records.
|
|||
| operationType | * |
Operation that can be applied to field To Aggregate; available values: SUM, AVG. | ||
| recordTypes |
Filter by Record Type. If empty, data for all Record Types are displayed. |
|||
| filter | WHERE clause to prefilter data before building a chart. |
|
Note: |
|
Configuration Checklist
Here is a list of steps needed to create a working configuration:
-
Create Context Type Detail record with configuration.
-
Drop Dynamic Chart Container component to the flexipage.
-
Set Context Type Detail record name/names to the design attribute of Dynamic Chart Container component.
Configuration Steps
Create Context Type Detail record with configuration
-
Go to Setup → Custom Metadata Types → Click Manage near Context Type Detail.
-
Click New.
-
For the sake of easier sorting and searching for the needed record, it is recommended to name record with Chart - prefix.
-
Set Chart value to the Type field.
-
Fill in Value field with attributes in JSON format according to your requirements based on the attribute types.
-
Save the record.
-
Open flexipage where Dynamic Chart Container has to be added in App Builder (Setup → App Builder → Edit Page).
-
Drag and drop Dynamic Chart Container component to the required region.
-
Set Context Type Detail Name of created custom metadata type record into Dynamic Chart Container design attribute.
-
Save the page.
Base Configurations
Custom Metadata
Context Type Detail
| Record Label | Record API Name |
|---|---|
| Chart - Agr Child Agr by Record Type | Chart_Agr_Child_Agr_by_Record_Type |
| Chart - Agr Child Agr by Subtype | Chart_Agr_Child_Agr_by_Subtype |
| Chart - Agr Invoices by Invoice Status | Chart_Agr_Invoices_by_Invoice_Status |
| Chart - Attendees by Attendance Status | Chart_Attendees_by_Attendance_Status |
| Chart - Attendees by Invitation Status | Chart_Attendees_by_Invitation_Status |
| Chart - Attendees by Qualificat Status | Chart_Attendees_by_Qualification_Status |
| Chart - Estimated Expense by Budget | Chart_Estimated_Expense_by_Budget |
| Chart - Estimated Expense By Type | Chart_Estimated_Expense_By_Type |
| Chart - Experts by Agreement Status | Chart_Experts_by_Agreement_Status |
| Chart - Experts by Approval Status | Chart_Experts_by_Approval_Status |
| Chart - Invoices by Invoice Status | Chart_Invoices_by_Invoice_Status |
| Chart - M Ancilliary by Status | Chart_M_Ancilliary_by_Status |
| Chart - M Benefit by Status | Chart_M_Benefit_by_Status |
| Chart - MM by Attendance Status | Chart_MM_by_Attendance_Status |
| Chart Activity Summ Participants By Act | Chart_ActivitySummParticipantsByActivity |
| Chart Activity Summary Attendee Type | Chart_ActivitySummaryAttendeeType |
| Chart Activity Summary Delivery Format | Chart_ActivitySummaryDeliveryFormat |
| Chart Activity Summary Specialties | Chart_ActivitySummarySpecialties |
Flexipages
| Flexipage | Context Type Detail Records used on flexipage |
|---|---|
| BPC_Agreement_MasterAgreement.flexipage | Chart_Agr_Child_Agr_by_Record_Type, Chart_Agr_Child_Agr_by_Subtype |
| BPC_Agreement_ServicesAgreement.flexipage | Chart_Agr_Invoices_by_Invoice_Status |
| BPC_Agreement_SOW.flexipage | Chart_Agr_Invoices_by_Invoice_Status |
| BPC_Meeting_DisplaysAndExhibits.flexipage | Chart_Attendees_by_Attendance_Status, Chart_Attendees_by_Invitation_Status, Chart_Attendees_by_Qualification_Status, Chart_Estimated_Expense_by_Budget, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_Congress.flexipage | Chart_Attendees_by_Invitation_Status, Chart_Estimated_Expense_by_Budget, Chart_Estimated_Expense_By_Type, Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_Training.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_AdvisoryBoard.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_ConsultingServices.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Grants_Meeting_EventSponsorship.flexipage | Chart_Estimated_Expense_by_Budget |
| BPC_Meeting_EventSponsorship.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_Grant.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Estimated_Expense_By_Type, Chart_MM_by_Attendance_Status |
| BPC_Meeting_HCPSponsorship.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_HomeOfficeSpeakerMeeting.flexipage | Chart_Estimated_Expense_by_Budget, Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status, Chart_MM_by_Attendance_Status |
| BPC_Meeting_IIS.flexipage | Chart_Estimated_Expense_by_Budget |
| BPC_MeetingMember_WriteIn.flexipage | Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status |
| BPC_MeetingMember_Attendee.flexipage | Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status |
| BPC_MeetingMember_NonProfiledAttendee.flexipage | Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status |
| BPC_MeetingMember_Speaker.flexipage | Chart_Experts_by_Agreement_Status, Chart_Experts_by_Approval_Status, Chart_Invoices_by_Invoice_Status |